<template>
  <view class="wrap">
    <view class="header">
      <view class="search-keyword">
        <u-icon class="search-icon" name="search" color="#888" size="28"></u-icon>
        <input
          class="input"
          v-model="keyword"
          :value="keyword"
          placeholder="搜索影片"
          trim
          placeholder-class="placeholder-class"
          confirm-type="search"
          @confirm="params.keyword = keyword"
        />
        <u-button type="primary" class="search-btn" @tap="params.keyword = keyword">搜索</u-button>
        <view class="filter cursor" @tap="filterShow = !filterShow">
          <u-icon name="more-circle" size="30"></u-icon>
          筛选
        </view>
      </view>

      <view class="classify">
        <u-tabs
          class="cursor"
          bg-color="#1d1d1f"
          active-color="#19be6b"
          inactive-color="#f1f1f1"
          bar-height="4"
          :is-scroll="false"
          :list="filterObj[0].list"
          :current="params[filterObj[0].key]"
          @change="
            index => {
              filterTabChange(index, filterObj[0].key)
            }
          "
        ></u-tabs>
      </view>

      <view class="filter-tabs" v-show="filterShow">
        <view class="item" v-for="(item, index) in filterObj" :key="index">
          <u-tabs
            v-if="index > 0"
            height="58"
            bg-color="#1d1d1f"
            inactive-color="#f1f1f1"
            active-color="#19be6b"
            :is-scroll="true"
            :show-bar="false"
            :list="item.list"
            :current="params[item.key]"
            @change="
              index => {
                filterTabChange(index, item.key)
              }
            "
          ></u-tabs>
        </view>
        <view class="filter-btns">
          <button class="btn" type="primary" size="mini" @tap="resetFilter">复位</button>
          <button class="btn close" size="mini" @tap="filterShow = false">关闭</button>
        </view>
      </view>
    </view>
    <u-mask :show="filterShow" duration="50" z-index="9" @click="filterShow = false"></u-mask>

    <view class="list" v-if="filmList.length > 0">
      <view class="item" @tap="$u.route('/pages/play', { id: item._id })" ref="filmItem" v-for="(item, index) in filmList" :key="index">
        <view class="item-rank">{{ item.douban_rating ? item.douban_rating : '0' }}</view>
        <view class="film">
          <view class="pic">
            <u-lazy-load :height="428" :image="item.pic" border-radius="20" img-mode="scaleToFill" :error-img="getImage(item)"></u-lazy-load>
          </view>

          <view class="film-info">
            <view class="name">{{ item.film_name }}</view>
            <view class="info">
              <view>{{ item.douban_initial_date ? item.douban_initial_date : item.initial_year }}</view>
              <view>{{ item.douban_country ? item.douban_country : item.area }}</view>
            </view>
            <!-- <view class="des">
              {{ item.des }}
            </view> -->
          </view>
        </view>
      </view>
    </view>
    <u-loadmore class="loadmore" margin-top="20" margin-bottom="40" :status="status" :loadText="{ loadmore: '上拉加载更多', loading: '加载中', nomore: '后面木有了' }" />
    <u-back-top :scroll-top="scrollTop" top="600" bottom="100"></u-back-top>

    <u-modal v-model="secretShow" z-index="9999" :show-title="false" @confirm="getFilters">
      <view class="slot-content u-padding-20">
        <u-input v-model="secret" clearable input-align="center" :focus="true" :border="true" trim placeholder="" />
      </view>
    </u-modal>
  </view>
</template>

<script lang="ts">
import { Component, Watch } from 'vue-property-decorator'
import PrimaryMixin from '@/common/mixins/PrimaryMixin'
import fetch from '@/common/utils/fetch'
import store from '@/store'

@Component({
  components: {}
})
export default class extends PrimaryMixin {
  private keyword: string = '' // 搜索关键字
  private status = 'loadmore'
  private scrollTop = 0
  private total = 0

  private filmList = []
  private itemStyle = { width: 0, height: 0 }
  private params = {
    keyword: '',
    year: 0,
    area: 0,
    order: 0,
    genre: 0,
    classify: 0,
    rank: 0,
    pagesize: 0,
    page: 1
  }

  private filterTabstyle = {
    background: '#edf1ed',
    'border-radius': '2px'
  }

  private filterShow = false
  private filterObj = [{ key: 'classify', list: [] }]

  private mediaQueryOb = null

  get secret() {
    return store.getters.getSecretkey
  }

  set secret(v) {
    store.commit('setSecretkey', v)
  }

  get newParams() {
    return this.$u.deepClone(this.params)
  }

  @Watch('newParams', { immediate: false, deep: true })
  onParamsChange(newVal, oldVal) {
    // 除了page变化,其他发生变化都需要把page重置为1
    if (newVal.page === oldVal.page) {
      this.params.page = 1
      this.filmList = []
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      })
    }
    this.query()
  }

  onShow() {
    const searchObj = store.getters.getSearchObj
    if (Object.keys(searchObj).length > 0) {
      store.commit('setSearchObj', {})
      this.keyword = searchObj.kwdtype + ':' + searchObj.kwd
      this.params.keyword = this.keyword
    }
    this.getFilters()
  }

  // 和 UI 相关的 api 在组件 mountd 后执行
  mounted() {
    this.testMediaQueryObserver()
  }

  destroyed() {
    this.mediaQueryOb.disconnect() // 组件销毁时停止监听
  }

  // 设置当前是否显示回到顶部
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  }

  // 滚动到底部
  onReachBottom(e) {
    if (this.status !== 'loading' && this.status !== 'nomore') {
      this.params.page += 1
    }
  }

  // 下拉刷新
  onPullDownRefresh() {
    const pageSize = this.params.pagesize
    this.params = {
      keyword: '',
      year: 0,
      area: 0,
      order: 0,
      genre: 0,
      classify: 0,
      rank: 0,
      pagesize: pageSize,
      page: 1
    }
  }

  // 设置连点
  private clickTime = null
  private clickNum = 0
  private secretShow = false
  private resetFilter() {
    this.keyword = ''
    this.params.keyword = ''
    this.filterObj.forEach(v => {
      this.params[v.key] = 0
    })
    if (!this.clickTime) {
      this.clickTime = setTimeout(() => {
        this.clickNum = 0
        clearTimeout(this.clickTime)
        this.clickTime = null
      }, 2000)
    }
    this.clickNum += 1
    if (this.clickNum >= 5) {
      this.clickNum = 0
      this.secretShow = true
    }
  }

  // 进行筛选
  private filterTabChange(index, key) {
    this.$set(this.params, key, index)
  }

  private testMediaQueryObserver() {
    this.mediaQueryOb = uni.createMediaQueryObserver(this)
    this.mediaQueryOb.observe({ minWidth: 560 }, matches => {
      const row = parseInt((this.$u.sys().screenWidth - 10) / 182)
      this.params.pagesize = matches ? row * 6 : row * 12
    })
  }

  // 搜索列表
  private query() {
    uni.showLoading({
      mask: true,
      title: '加载中...'
    })
    this.status = 'loading'
    fetch('list', this.params).then(res => {
      this.filmList = this.filmList.concat(res.data.rows)
      this.status = res.data.rows.length > 0 ? 'loadmore' : 'nomore'
      uni.hideLoading()
    })
  }

  // 获取筛选条件
  private getFilters() {
    fetch('getClassify').then(res => {
      this.filterObj = res.data
    })
  }

  // 获取图片
  private getImage(item) {
    if (item.douban_pic && item.douban_pic.indexOf('movie_default_medium') === -1) {
      return item.douban_pic
    }
    return ''
  }
}
</script>

<style lang="scss" scoped>
.filter-tabs {
  .item {
    margin-top: 8rpx;
  }
  .filter-btns {
    margin: 20rpx 0 40rpx 0;
    text-align: center;
    .btn {
      display: inline-block;
      padding: 0 40rpx;
      &:first-child {
        margin-right: 60rpx;
      }
      &.close {
        color: #101d18;
      }
    }
  }
}
.header {
  background: linear-gradient(left, #101d18, #1c2023);
  box-shadow: 0 4px 20px 2px #1c2023;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  .search-keyword {
    padding: 20rpx;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    .input {
      color: rgb(184, 183, 183);
      border-radius: 64rpx;
      height: 64rpx;
      background: linear-gradient(left, #404f52, #333b40);
      font-size: 28rpx;
      padding-left: 60rpx;
      box-sizing: border-box;
      flex: 1;
    }
    .search-icon {
      position: absolute;
      margin-left: 16rpx;
      top: 40rpx;
    }
    .placeholder-class {
      color: #888888;
    }
  }
  .search-btn {
    height: 60rpx;
    padding: 0 28rpx;
    font-size: 26rpx;
    margin: 0;
    margin-left: 8rpx;
  }
  .filter {
    color: rgb(184, 183, 183);
    font-size: 26rpx;
    margin-left: 20rpx;
    background: #333b40;
    line-height: 64rpx;
    padding: 0 20rpx;
    border-radius: 32rpx;
    display: flex;
    .u-icon {
      margin-right: 8rpx;
    }
  }
  .classify {
    width: 100%;
  }
}
.list {
  margin-top: 170rpx;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  font-size: 26rpx;
  justify-content: space-between;
  padding-left: 20rpx;
  .item {
    position: relative;
    margin: 20rpx 20rpx 20rpx 0;
    width: 344rpx;
    border-radius: 20rpx;
    &:hover {
      cursor: pointer;
      box-shadow: 0 5px 20px 4px #37a862 !important;
      transform: scale(1.02) translateY(-2px); // scale 控制缩放大小
    }
    .item-rank {
      position: absolute;
      top: 20rpx;
      z-index: 9;
      background-color: #ff5f00 !important;
      font-size: 14px;
      left: -12rpx;
      padding: 0 20rpx;
      text-align: right;
      &::before {
        content: '';
        position: absolute;
        bottom: -12rpx;
        border-top: 12rpx solid #ff5f00;
        border-left: 12rpx solid transparent;
        left: 0;
      }
    }
    .film-info {
      padding: 8rpx;
      white-space: nowrap;
      overflow: hidden;
    }
    .name {
      margin: 10rpx 0;
    }
    .info {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      color: #ababab;
    }
  }
}
.loadmore {
  margin-bottom: 20rpx;
}
</style>
